<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式绑定</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.activated {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- :Class="{activated : isActivated},若isActivated为true,class为activated" -->
			<!-- <div @click="handleDivClick" :Class="[activated]"> -->
			<div :style="[styleObj,{fontSize : '40px'}]" @click="handleDivClick2">
				Hello World</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					/* isActivated : false */
					/* activated: "", */
					styleObj : {
						color : "black",
					}
				},
				methods: {
					/* handleDivClick :  function(){
						this.activated = !this.activated
					} */
					/* handleDivClick : function(){
						if(this.activated === "activated"){
							this.activated = "";
						}else{
							this.activated = "activated";
						}
					} */
					/* handleDivClick: function() {
						this.activated = this.activated === "activated" ? "" : "activated";
					} */
					handleDivClick2 :function(){
						this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
					}					
				}
			});
		</script>
	</body>
</html>
